<script setup>
import { computed } from 'vue'
import { Link } from '@inertiajs/vue3'

const props = defineProps({
  variant: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary'].includes(value)
  },
  className: String,
  href: String
})

const variantStyles = {
  primary: 'bg-primary-600 font-semibold text-white hover:bg-primary-500 active:bg-primary-700 active:text-white/80 dark:bg-primary-500 dark:hover:bg-primary-400 dark:active:bg-primary-500 dark:active:text-white/80',
  secondary: 'bg-zinc-50 font-medium text-zinc-900 hover:bg-zinc-100 active:bg-zinc-100 active:text-zinc-900/60 dark:bg-zinc-800/50 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-zinc-50 dark:active:bg-zinc-800/50 dark:active:text-zinc-50/70'
}

const buttonClass = computed(() =>
  [
    'inline-flex items-center gap-2 justify-center rounded-md py-2 px-3 text-sm outline-offset-2 transition active:transition-none',
    variantStyles[props.variant],
    props.className
  ].filter(Boolean)
)
</script>

<template>
  <component
    :is="props.href ? Link : 'button'"
    v-bind="props.href ? { href: props.href } : {}"
    :class="buttonClass"
  >
    <slot />
  </component>
</template>
